<template>
  <div class="box" >
    <p id="box_111" style="margin-top: 40px;" ref="contenteditableBox"
    contenteditable v-html="innerHTML"
    ></p>
    <!-- <zTextEditing uId="box_111" @changeTextStyle="changeTextStyle" /> -->
   
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CSSProperties } from 'vue';
// import  zTextEditing from '../../components/z-components/zTextEditing.vue'

const innerHTML = ref<string>(`
  先帝创业先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，
    盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之信息
    路也。宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，
    使内外异法也。侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，
    然后施行，必能裨补阙漏，有所广益。将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，
    悉以咨之，必能使行阵和睦，优劣得所。亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，
    未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明，故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。今当远离，临表涕零，不知所言。
`)

const contenteditableBox = ref()

const changeTextStyle = (data: string) => {
  // console.log(11111)
  console.log(data)
}

// const mousemoveChange = (e: MouseEvent) => {



// window.addEventListener("mouseup", (e: MouseEvent) => {
  
//   const selection = window.getSelection()
//   if (selection) {

//     // 鼠标选中的文本
//     const selectionStr:string = selection.toString();

//     const { startOffset, endOffset } = selection.getRangeAt(0)

//     const endLength = selection.getRangeAt(0).endContainer.textContent?.length || 0
//     const { outerHTML: endOuterHTML, outerText: endOuterText } = selection.getRangeAt(0).endContainer.parentElement as HTMLElement
//     // console.log(selection.getRangeAt(0).endContainer)
   
//     const startLength = selection.getRangeAt(0).startContainer.textContent?.length || 0
//     const { outerHTML: startOuterHTML, outerText: startOuterText } = selection.getRangeAt(0).startContainer.parentElement as HTMLElement
    
//     //const tO = innerHTML.value.split(`<template>${textLogo}</template>`)

//     console.log(selectionStr)
//     if (!selectionStr) {
//       return
//     }
//     // document.execCommand('forecolor', false, 'red')
    
//     const sHtml = innerHTML.value.slice(0, startOffset)
//     selectedText = selectionStr
//     const eHtml = innerHTML.value.slice(endOffset)

//     // startHtml = sHtml
//     // endHtml = eHtml

//     const iArr = innerHTML.value.split(startOuterHTML)
//     const oArr = innerHTML.value.split(endOuterHTML)
    
//     console.log('startOuterHTML', startOuterHTML)
//     console.log('endOuterHTML', endOuterHTML)
//     console.log(11111, selectionStr, startOffset, endOffset)
//     if (iArr.length !== 2 && oArr.length !== 2) {
//       console.log('第四种情况：选中的文本没有 dom元素')
//     }

//     if (iArr.length === 2 && oArr.length !== 2) {
//       // 前面有没选完的dom元素  后面没有 没选完的dom元素
//       console.log('第一种情况：前面有没选完的dom元素， 后面没有 没选完的dom元素', startOuterHTML)
//       console.log(selectionStr, startOffset)
//       // 前面 未被选择完的dom 元素的 span开 :'<span class="p_dsd" style="color: aqua;">'
//       const startSpan = startOuterHTML.split(startOuterText)[0]
//       // 前面 未被选择完的dom元素 部分text文本内容 :'cccVVV'
//       const iStartSelectText = startOuterText.slice(0, startOffset)
//       // 前面 未被选择完的dom元素 部分text文本内容 :'cccVVV'
//       const oStartSelectText = selectionStr.slice(0, (startLength - startOffset))
      
     
      
//       startHtml = innerHTML.value.split(startOuterHTML)[0] + startSpan + iStartSelectText + '</span>'
//       console.log('头部的',  startHtml)
//       selectedText = startSpan + oStartSelectText + '</span>' + selectionStr.slice(iStartSelectText.length)
//       console.log('中间的',  selectedText)
//       endHtml = endOuterHTML.split(startOuterHTML)[1].slice(endOffset)
//       console.log('尾部的', endHtml)
//     }
//     if (iArr.length === 2 && oArr.length === 2) {
//       // 前面有 没选完的 dom 元素  后面有 没选完的 dom 元素
//       console.log('第二种情况： 前面有没选完的 dom元素， 后面有 没选完的dom元素')
//       // 前面 未被选择完的dom 元素的 span开 :'<span class="p_dsd" style="color: aqua;">'
//       const startSpan = startOuterHTML.split(startOuterText)[0]
//       // 前面 未被选择完的dom元素 部分text文本内容 :'cccVVV'
//       const iStartSelectText = startOuterText.slice(0, startOffset)
//       // 前面 未被选择完的dom元素 部分text文本内容 :'cccVVV'
//       const oStartSelectText = selectionStr.slice(0, (startLength - startOffset))
      
//       const centerHtml = innerHTML.value.split(startOuterHTML)[1].split(endOuterHTML)[0]

//       // 后面 未被选择完的dom 元素的 span开 :'<span class="p_dsd" style="color: aqua;">'
//       const endSpan = endOuterHTML.split(endOuterText)[0]
//       // 后面 未被选择完的dom元素 部分text文本内容 :'cccVVV'
//       const iEndSelectText = selectionStr.slice(-endOffset)

//       const oEndSelectText = endOuterText.slice(endOffset)

//       // console.log(22222, iEndSelectText, endOuterHTML.split(endOuterText)[0])
//       // console.log(endOuterHTML)
//       // console.log(innerHTML.value.split(endOuterHTML))

//       startHtml = innerHTML.value.split(startOuterHTML)[0] + startSpan + iStartSelectText + '</span>'
//       console.log('头部的',  startHtml)
//       selectedText = startSpan + oStartSelectText + '</span>' + centerHtml + endSpan + iEndSelectText + '</span>'
//       console.log('中间的',  selectedText)
//       endHtml = endSpan + oEndSelectText + '</span>' + innerHTML.value.split(endOuterHTML)[1]
//       console.log('尾部的',  endHtml)

//       // endOuterHTML.split(endOuterText)[0] + oSelectText + '</span>'
//     }

//     if (oArr.length === 2) {
//       // 后面有 没选完的 dom 元素
//       console.log('后面有 没选完的 dom 元素')
//     }
//     // console.log(endOuterHTML)
//     // console.log(startOuterHTML)
//     if (operationPop.value) {
//       operationPop.value.style.display = 'block'
//       operationPop.value.style.left =  200 + 'px'
//       operationPop.value.style.top = 300 + 'px'
//     }
      
    
//     // console.log(startOuterHTML, endOuterHTML)
//     // console.log(innerHTML.value)
//     // console.log(selection.getRangeAt(0))

//     // return 
//     // if (startOuterHTML !== endOuterHTML) {
//     //   const sHtml = innerHTML.value.split(startOuterHTML)[0] || ''
//     //   selectedText = startOuterHTML + innerHTML.value.split(startOuterHTML)[1].split(endOuterHTML)[0] + endOuterHTML || ''
//     //   const eHtml = innerHTML.value.split(startOuterHTML)[1].split(endOuterHTML)[1] || ''
      
//     //   startHtml = sHtml
//     //   endHtml = eHtml
      
//     //   // console.log(innerHTML.value.split(startOuterHTML))
//     //   const { offsetLeft, offsetTop } = selection.getRangeAt(0).endContainer.parentElement as HTMLElement

//     //   if (operationPop.value) {
//     //     operationPop.value.style.display = 'block'
//     //     operationPop.value.style.left = offsetLeft + 10 + 'px'
//     //     operationPop.value.style.top = offsetTop + 16 + 'px'
//     //   }
     
//     // }

//     // console.log(startHtml)
//     // console.log(endHtml)
//     // console.log(selectedText)
//     // selection.getRangeAt(0).endContainer.parentElement.offsetLeft
//     console.log(selection)
//   }
 
// })


</script>

<style lang="scss">
.box {
  margin: 0 auto;
  width: 400px;
  position: relative;

  
}

</style>
